
//饼图
function pieEvt(pieData,lengendData,len,id,color){
    var pie3Opt = {
        color:color,
        backgroundColor: 'transparent',
        legend: {
            show:false,
            orient: 'horizontal',
            top: '71%',
            data:lengendData,
            textStyle:{
                color:'#fff'
            }
        },
        tooltip : {
            trigger: 'item',
            //formatter: "{a} <br/>{b} : {c} ({d}%)",
            formatter:function(param){
                if(param.name){
                	return  '<div>'+param.name+'</div>' +
			        '<div>'+param.value+'  ('+param.percent+'%)</div>'
                }
    		},
            position:'right'
        },
        series: [{
            name: '',
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['45%', '50%'],
            hoverAnimation: true,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            data: pieData
        },{
            name: '',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            animationType: 'scale',
            radius: [200, 200],
            center: ['45%', '50%'],
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: 0,
                label: {
                    normal: {
                        formatter: '38',
                        textStyle: {
                            color: '#20fd07',
                            fontSize: 25,
                            fontWeight: 'bold'
                        }
                    }
                }
            }, {
                tooltip: {
                    show: false
                },
                label: {
                    normal: {
                        formatter: '\n门户',
                        textStyle: {
                            color: '#bbeaf9',
                            fontSize: 12
                        }
                    }
                }
            }]
        }]
    };
    var pie3Chart = echarts.init(document.getElementById(id))
    pie3Chart.setOption(pie3Opt)
    window.addEventListener("resize", function () {
        pie3Chart.resize();
    });
    var pieIndex = 0
    var pieAutoShow = function(){
        if (pieIndex >len-1){
            pieIndex = 0
        }
        for (var i = 0;i <len;i++){
            if (i != pieIndex){
                pie3Opt.series[0].data[i]['selected'] = false;
            }else{
                pie3Opt.series[0].data[i]['selected'] = true;
            }
        }
        //pie3Opt.series[1].data[0].label.normal.formatter = pie3Opt.series[0].data[pieIndex].value + ""
        pie3Opt.series[1].data[0].label.normal.formatter=parseInt(pieData[pieIndex].value/sum(pieData)*100) + "%"
        pie3Opt.series[1].data[1].label.normal.formatter = "\n" + pie3Opt.series[0].data[pieIndex].name
        pie3Chart.setOption(pie3Opt)
        pieIndex++
        setTimeout(pieAutoShow,1200)
    }
    pieAutoShow()
}

function lengendData(data){
	var lenData=[];
	for(var i=0;i<data.length;i++){
		lenData.push(data[i].name)
	}
	return lenData
}

function sum(data){
	var totle=0;
	for(var i=0;i<data.length;i++){
		totle+=data[i].value;
	}
	return totle
}

var pieData1=[
    {value: 750180282683, name: "百度手机助手"},
    {value: 228755987204, name: "360手机助手"},
    {value: 19400863169, name: "腾讯应用宝"},
    {value: 14799728241, name: "AppChina"},
    {value: 11979858799, name: "搜狗市场"},
    {value: 9991135960, name: "新浪网"},
    {value: 1737856679, name: "酷派应用商店"},
    {value: 1430000000, name: "iTools"},
    {value: 1173154535, name: "刷机精灵"},
    {value: 143924859, name: "一起晃手游网"},
    {value: 3691789, name: "其他"}
]
var lengendData1=lengendData(pieData1)
var color1=["#ffe34e", "#a0a7e6", "#a6e382", "#96dee8","#09a7e2","#b8ff2e","#09e24b","#09e2cb","#d40d03","#560081","#af0058", "#ff8700", "#ffe34e", "#93dd6e", "green"];
pieEvt(pieData1,lengendData1,pieData1.length,"appPie1",color1)
var pieData2=[
    {value: 1677940093, name: "百度手机助手"},
    {value: 390430982, name: "腾讯应用宝"},
    {value: 274283659, name: "第一应用"},
    {value: 32313208, name: "快虎市场"},
    {value: 27000000, name: "安智市场"},
    {value: 21251598, name: "酷派应用商店"},
    {value: 17866108, name: "360手机助手"}
]
var lengendData2=lengendData(pieData2)
var color2=["#560081","#af0058", "#ff8700", "#ffe34e", "#93dd6e","#09a7e2","#b8ff2e","#09e24b","#09e2cb","#d40d03","#560081","#af0058", "#ff8700", "#ffe34e", "#93dd6e", "green"];
pieEvt(pieData2,lengendData2,pieData2.length,"appPie2",color2)



window.addEventListener("resize", function () {
    mapChart.resize();
});


//柱状图
var timeData= ['2017-01','2017-02','2017-03','2017-04','2017-05','2017-06','2017-07','2017-08','2017-09','2017-10','2017-11','2017-12','2018-01']
var data1=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,2758982361]
var appLine2=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,5384861102]
var data2=[120, 182, 301, 234, 190, 150, 110, 202, 201, 364, 190, 70]
var barOption = function(){
	return {
    color : ["#88acf8","#0edf4d"],
    tooltip : {
//      trigger: 'axis',
    },
    grid: {
        top:30,
        left: '0%',
        right: '3%',
        bottom: 30,
        containLabel: true
    },
    xAxis: {
//      boundaryGap : false,
        type: 'category',
        splitLine:{    //grid区域分隔线
            show:false,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true,
            textStyle: {
                color: '#c0d4da'
            }
        },
        axisTick: {
            show: true,   //刻度线
            color:"#c0d4da"
        },
        axisLine:{
            show: true,   //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#c0d4da"
            }
        },
        data : timeData
    },
    yAxis : {
        splitLine:{    //grid区域分隔线
            show:true,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisTick: {
            show: true,   //刻度线
            color:"#c0d4da"
        },
        axisLine: {
            show: true ,  //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#c0d4da"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true
        },
    },
    series : [
        {
            name:'app应用数',
            type:'bar',
            symbol:'none',  //这句就是去掉点的
            lineStyle: { normal: {
                color:'#1de5f2',
            }},
            areaStyle: {
                normal: {
                    color:'#1de5f2',
                    opacity: 0.2
                }
            },
            data:data1
        }
    ]
	}
}

var barOption1 = function(){
	return {
    color : ["#88acf8","#0edf4d"],
    tooltip : {
//	      trigger: 'axis',
    },
    grid: {
        top:30,
        left: '0%',
        right: '3%',
        bottom: 30,
        containLabel: true
    },
    xAxis: {
//	      boundaryGap : false,
        type: 'category',
        splitLine:{    //grid区域分隔线
            show:false,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true,
            textStyle: {
                color: '#c0d4da'
            }
        },
        axisTick: {
            show: true,   //刻度线
            color:"#c0d4da"
        },
        axisLine:{
            show: true,   //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#c0d4da"
            }
        },
        data : timeData
    },
    yAxis : {
        splitLine:{    //grid区域分隔线
            show:true,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisTick: {
            show: true,   //刻度线
            color:"#c0d4da"
        },
        axisLine: {
            show: true ,  //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#c0d4da"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true
        },
    },
    series : [
        {
            name:'app应用数',
            type:'bar',
            barWidth:'50%',
            symbol:'none',  //这句就是去掉点的
            lineStyle: { normal: {
                color:'#1de5f2',
            }},
            areaStyle: {
                normal: {
                    color:'#1de5f2',
                    opacity: 0.2
                }
            },
            data:appLine2
        }
    ]
	}
}

var barOptionLeft=barOption()
var barChartLeft = echarts.init(document.getElementById('appLine1'))
barChartLeft.setOption(barOptionLeft);

var barOptionRight=barOption1()
var barChartRight = echarts.init(document.getElementById('appLine2'))
barChartRight.setOption(barOptionRight);


window.addEventListener("resize", function () {
    barChartLeft.resize();
    barChartRight.resize();
});




